<template>
    <el-dialog title="添加员工类别" :visible="visible" @update:visible="(bol)=>$emit('update:visible',bol)">
        <el-form>
            <el-form-item label="员工类别名称：" label-width="120px">
                <el-input style="width:240px;" v-model="goodsTypeForm.goodsTypeName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工所属部门：" label-width="120px">
                <el-select @change="goodsTypeForm.shopId='';$store.dispatch('getShopListByTypeId',goodsTypeForm.shopTypeId)" v-model="goodsTypeForm.shopTypeId" placeholder="请选择部门类别">
                    <el-option
                            v-for="item in $store.state.shop.allShopTypeList"
                            :key="item._id"
                            :value="item._id"
                            :label="item.shopTypeName"
                    ></el-option>
                </el-select>
                <el-select v-model="goodsTypeForm.shopId" placeholder="请选择部门">
                    <el-option v-for="item in $store.state.shop.shopListByID"
                               :key="item._id"
                               :value="item._id"
                               :label="item.shopName"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:visible',false)">取 消</el-button>
            <el-button @click="addGoodsTypeList" type="primary">提 交</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "GoodsTypeDialog",
        props:["visible","shopTypeId","shopId"],
        data(){
            return {
                goodsTypeForm:{
                    goodsTypeName:"",
                    shopTypeId:"",
                    shopId:""
                }
            }
        },
        methods:{
         async addGoodsTypeList(){
             await this.$store.dispatch("addGoodsTypeList",this.goodsTypeForm);
              this.$emit('update:visible',false)
              this.$store.dispatch("getGoodsTypeList")
              if(this.$route.name==="shopList")
                  this.$router.push({name:"goodsTypeList"})
          }
        },
        mounted(){
            // console.log(this.shopId,123333333333333)
            
            if(this.$store.state.shop.allShopTypeList.length<1)
                this.$store.dispatch("getAllShopTypeList")
            if(this.shopTypeId)
                this.$store.dispatch("getShopListByTypeId",this.shopTypeId)
            if(this.shopId){
                this.$store.dispatch("getShopListById",this.shopId)
            }
        }
    }
</script>

<style scoped>

</style>